<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-11 14:14:15
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-05-30 09:27:33
 * @FilePath: \ant-design-vue-jeecg-master\src\views\taskManagement\taskAllocation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="taskAllocation">
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="0" header="作战需求">
        <a-form-model :model="fightForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="指控车数量">
                <a-input-number
                  id="inputNumber"
                  @change="changeCarCounts"
                  v-model="fightForm.carCounts"
                  :min="1"
                  :max="4"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="导弹数量">
                <el-cascader
                  style="width: 100%"
                  :options="multipleTreeData"
                  :props="props"
                  collapse-tags
                  clearable
                  v-model="fightForm.das"
                ></el-cascader>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="8">
              <a-form-model-item label="每个车的导弹数量">
                <a-input-number style="width: 100%" id="inputNumber" v-model="fightForm.missileCounts" :max="4" />
              </a-form-model-item>
            </a-col> -->
            <a-col :span="6">
              <a-form-model-item label="作战日期">
                <a-range-picker
                  v-model="fightForm.date"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :show-time="{ format: 'YYYY-MM-DD HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item>
                <a-button @click="handleCreatInstruct" type="primary" style="margin-left: 60px"> 指令一键生成</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <!--  <a-col :span="8">
              <a-form-model-item label="作战日期">
                <a-range-picker
                  v-model="fightForm.date"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :show-time="{ format: 'YYYY-MM-DD HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                />
                <a-date-picker v-model="fightForm.startDate" style="width: 47%" valueFormat="YYYY-MM-DD" />~
                <a-date-picker v-model="fightForm.endDate" style="width: 47%" valueFormat="YYYY-MM-DD" />
              </a-form-model-item>
            </a-col>-->
            <!-- <a-col :span="8">
              <a-form-model-item label="作战时间">
                <a-time-picker v-model="fightForm.startTime" style="width: 47%" value-format="HH:mm:ss" />~
                <a-time-picker v-model="fightForm.endTime" style="width: 47%" value-format="HH:mm:ss" />
              </a-form-model-item>
            </a-col> -->
            <!-- <a-col :span="8">
              <a-form-model-item>
                <a-button @click="handleCreatInstruct" type="primary"> 指令一键生成</a-button>
              </a-form-model-item>
            </a-col> -->
          </a-row>
        </a-form-model>
      </a-collapse-panel>
      <a-collapse-panel key="1" header="星指上/下行链路工作参数配置">
        <a-form-model :model="form" :label-col="labelCol1" :wrapper-col="wrapperCol1">
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="指控车同步时隙起跳数配置">
                <!-- <a-select v-model="form.region1" placeholder="请选择" mode="tags" @change="handleChange">
                  <a-select-option value="shanghai"> Zone one </a-select-option>
                  <a-select-option value="beijing"> Zone two </a-select-option>
                </a-select> -->
                <a-radio-group
                  v-model="value1"
                  @change="onChange1"
                  style="display: block; margin-bottom: 10px"
                  button-style="solid"
                >
                  <a-radio-button value="a"> 车1 </a-radio-button>
                  <a-radio-button value="b"> 车2 </a-radio-button>
                  <a-radio-button value="c"> 车3 </a-radio-button>
                  <a-radio-button value="d"> 车4 </a-radio-button>
                </a-radio-group>
                <br />
                <a-radio-group v-model="value2" @change="onChange1" button-style="solid">
                  <a-radio-button value="1"> 1 </a-radio-button>
                  <a-radio-button value="2"> 2 </a-radio-button>
                  <a-radio-button value="3"> 3 </a-radio-button>
                  <a-radio-button value="4"> 4 </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-divider />
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星指上行链路工作参数配置">
                <a-select v-model="form.region1" placeholder="请选择" mode="tags" @change="handleChange">
                  <a-select-option value="shanghai"> Zone one </a-select-option>
                  <a-select-option value="beijing"> Zone two </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星指下行链路工作参数配置">
                <a-select v-model="form.region" placeholder="请选择" mode="tags" @change="handleChange">
                  <a-select-option value="shanghai"> Zone one </a-select-option>
                  <a-select-option value="beijing"> Zone two </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider />
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="指控车资源配置">
                <a-tabs default-active-key="1" :activeKey="tabActiveKey" @change="callback" class="tabs">
                  <a-tab-pane key="1" tab="车1">
                    <a-checkbox-group @change="onChange" defaultChecked="">
                      <a-row>
                        <a-col :span="3" v-for="(item, index) in resourcesList" :key="index + 'car1'">
                          <a-checkbox :value="index" :disabled="item.disabled && item.active != 1"> </a-checkbox>
                        </a-col>
                      </a-row>
                    </a-checkbox-group>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="车2">
                    <a-checkbox-group @change="onChange" defaultChecked="">
                      <a-row>
                        <a-col :span="3" v-for="(item, index) in resourcesList" :key="index + 'car2'">
                          <a-checkbox :value="index" :disabled="item.disabled && item.active != 2"> </a-checkbox>
                        </a-col>
                      </a-row>
                    </a-checkbox-group>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="车3">
                    <a-checkbox-group @change="onChange" defaultChecked="">
                      <a-row>
                        <a-col :span="3" v-for="(item, index) in resourcesList" :key="index + 'car3'">
                          <a-checkbox :value="index" :disabled="item.disabled && item.active != 3"> </a-checkbox>
                        </a-col>
                      </a-row> </a-checkbox-group
                  ></a-tab-pane>
                  <a-tab-pane key="4" tab="车4">
                    <a-checkbox-group @change="onChange" defaultChecked="">
                      <a-row>
                        <a-col :span="3" v-for="(item, index) in resourcesList" :key="index + 'car4'">
                          <a-checkbox :value="index" :disabled="item.disabled && item.active != 4"> </a-checkbox>
                        </a-col>
                      </a-row> </a-checkbox-group
                  ></a-tab-pane>
                </a-tabs>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="16">
              <a-form-model-item label="指控车资源配置：">
                <a-radio-group v-model="value3" @change="onChange" style="display: block" button-style="solid">
                  <a-radio-button value="a"> 车1 </a-radio-button>
                  <a-radio-button value="b"> 车2 </a-radio-button>
                  <a-radio-button value="c"> 车3 </a-radio-button>
                  <a-radio-button value="d"> 车4 </a-radio-button>
                </a-radio-group>

                <pool ref="pool" :total="30" :small="0" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row> -->
        </a-form-model>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="星弹工作参数配置">
        <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星弹上行链路工作参数配置">
                <a-select v-model="form1.region" placeholder="请选择" allowClear>
                  <a-select-option value="1"> 指控车1 </a-select-option>
                  <a-select-option value="2"> 指控车2 </a-select-option>
                  <a-select-option value="3"> 指控车3 </a-select-option>
                  <a-select-option value="4"> 指控车4 </a-select-option>
                </a-select>
                <!-- <a-checkbox-group class="XD-group" @change="onChange1" defaultChecked="" v-if="form1.region">
                  <a-row>
                    <a-col :span="3" v-for="(item, index) in 1920" :key="index + 'pd'">
                      <a-checkbox :value="index"> </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group> -->
                <pool ref="pool" :total="1920" :small="0" v-if="form1.region" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="16">
              <a-form-model-item label="星弹下行链路工作参数配置">
                <a-select v-model="form1.speed" placeholder="请选择">
                  <a-select-option value="32kbps"> 32kbps </a-select-option>
                  <a-select-option value="96kbps"> 96kbps </a-select-option>
                  <a-select-option value="256kbps"> 256kbps </a-select-option>
                  <a-select-option value="1024kbps"> 1024kbps </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="16">
              <a-form-model-item label="星指下行链路速率挡位配置">
                <a-select v-model="form1.speed" placeholder="请选择">
                  <a-select-option value="32kbps"> 32kbps </a-select-option>
                  <a-select-option value="96kbps"> 96kbps </a-select-option>
                  <a-select-option value="256kbps"> 256kbps </a-select-option>
                  <a-select-option value="1024kbps"> 1024kbps </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item>
                <a-button @click="creatInstruct" type="primary"> 发送</a-button>
              </a-form-model-item>
            </a-col>
          </a-row> -->
        </a-form-model>
      </a-collapse-panel>
    </a-collapse>
    <creat-instruct ref="creatInstruct" />
  </div>
</template>

<script>
import CascaderSelect from './modules/Cascader.vue'
import creatInstruct from './modules/createInstruct'
//  <!-- 资源池 -->
import pool from './modules/resourcePool.vue'
export default {
  components: { creatInstruct, pool, CascaderSelect },
  data() {
    return {
      text: `world.`,
      value1: 'a',
      value2: '1',
      value3: 'a',
      tabActiveKey: '1',
      activeKey: ['0', '1', '2'],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      labelCol1: { span: 4 },
      wrapperCol1: { span: 18 },
      form: {},
      fightForm: { startDate: undefined },
      form1: {},
      check: [],
      checkList: [],
      resourcesList: [],
      props: { multiple: true },
      ac: [
        { active: 1, disabled: [] },
        { active: 2, disabled: [] },
        { active: 3, disabled: [] },
        { active: 4, disabled: [] },
      ],
      das: null,
      multipleTreeData: [
        // {
        //   id: '1',
        //   value: '指挥车1',
        //   label: '指挥车1',
        //   children: [
        //     {
        //       id: '1-1',
        //       value: '导弹1',
        //       label: '导弹1',
        //     },
        //     {
        //       id: '1-2',
        //       value: '导弹2',
        //       label: '导弹2',
        //     },
        //     {
        //       id: '1-3',
        //       value: '导弹3',
        //       label: '导弹3',
        //     },
        //     {
        //       id: '1-4',
        //       value: '导弹4',
        //       label: '导弹4',
        //     },
        //   ],
        // },
        // {
        //   id: '2',
        //   value: '指挥车2',
        //   label: '指挥车2',
        //   children: [
        //     {
        //       id: '2-1',
        //       value: '导弹1',
        //       label: '导弹1',
        //     },
        //     {
        //       id: '2-2',
        //       value: '导弹2',
        //       label: '导弹2',
        //     },
        //     {
        //       id: '2-3',
        //       value: '导弹3',
        //       label: '导弹3',
        //     },
        //     {
        //       id: '2-4',
        //       value: '导弹4',
        //       label: '导弹4',
        //     },
        //   ],
        // },
        // {
        //   id: '3',
        //   value: '指挥车3',
        //   label: '指挥车3',
        //   children: [
        //     {
        //       id: '3-1',
        //       value: '导弹1',
        //       label: '导弹1',
        //     },
        //     {
        //       id: '3-2',
        //       value: '导弹2',
        //       label: '导弹2',
        //     },
        //     {
        //       id: '3-3',
        //       value: '导弹3',
        //       label: '导弹3',
        //     },
        //     {
        //       id: '3-4',
        //       value: '导弹4',
        //       label: '导弹4',
        //     },
        //   ],
        // },
      ],
    }
  },
  watch: {
    activeKey(key) {
      console.log(key)
    },
  },
  created() {
    for (let i = 0; i < 30; i++) {
      console.log(1232)
      this.resourcesList.push({ label: i, status: 1, disabled: false, active: '' })
    }
  },
  methods: {
    changeCarCounts(val) {
      this.multipleTreeData = []
      let children = []
      for (let i = 1; i <= 32; i++) {
        children.push({
          id: `${i}-1`,
          value: `导弹${i}`,
          label: `导弹${i}`,
        })
      }
      for (let i = 1; i <= val; i++) {
        this.multipleTreeData.push({
          id: i,
          value: `指挥车${i}`,
          label: `指挥车${i}`,
          children: [...children],
        })
      }
    },

    creatInstruct() {},
    handleCreatInstruct() {
      //指令一键生成
      this.$refs.creatInstruct.showModal(this.fightForm)
      console.log(this.fightForm)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    onSubmit() {
      console.log(this.form)
    },
    onChange1(checkedValues) {
      console.log('checked = ', checkedValues)
    },
    onChange(e) {
      this.resourcesList.forEach((i) => {
        if (i.active == this.tabActiveKey) {
          i.disabled = false
        }
        e.forEach((item) => {
          if (i.label == item) {
            i.disabled = true
            i.active = this.tabActiveKey
          }
        })
      })
    },
    callback(key) {
      this.tabActiveKey = key
      this.ac.forEach((i, index) => {
        if (i.active == this.tabActiveKey) {
          this.ac.splice(index, 1)
        }
      })
    },
    filter(val) {
      if (this.checkList.indexOf(val) != -1) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="less">
.taskAllocation {
  .ant-checkbox-group {
    // height: 300px;
    // line-height: 0.9;
    .ant-checkbox-wrapper {
      margin: 0;
    }
    .ant-col {
      width: auto;
      margin: 0;
    }
  }
}
.tabs .ant-row {
  width: 600px;
  .ant-checkbox-inner {
    width: 40px !important;
    height: 40px !important;
    text-align: center;
    &::after {
      width: 7px;
      height: 14px;
      left: 35%;
    }
  }
}
.ant-checkbox-inner {
  /* background-color: red !important; */
  border-color: #6e6e6e !important;
}
.ant-form-item-control {
  line-height: 0 !important;
}
</style>
